<template>
    <div class="ceshi">
        <el-drawer :close-on-click-modal="false" class="hm-drawer" size="70%" direction="rtl" v-model="show"
            :before-close="handleClose">
            <template #header>
                <div class="hm-box-title">盘点记录详情</div>
            </template>

            <div class="hm-form-item-box1">
                <div class="hm-form-title" style=" position: relative; ">盘点信息</div>

                <el-row class="hm-row3 mb96" :gutter="60">
                    <el-col :span="24">
                        <el-descriptions :column="3">
                            <el-descriptions-item label="盘点单号：">{{
                                commoditydetailsData.id
                                }}</el-descriptions-item>
                            <el-descriptions-item label="盘点开始时间：">{{
                                commoditydetailsData.createTime
                                }}</el-descriptions-item>
                            <el-descriptions-item label="盘点结束时间：">{{
                                commoditydetailsData.finishTime
                                }}</el-descriptions-item>
                            <el-descriptions-item label="产品部门：">{{
                                commoditydetailsData.createDeptName
                                }}</el-descriptions-item>
                            <el-descriptions-item label="盘点人：">{{
                                commoditydetailsData.createByName
                                }}</el-descriptions-item>
                            <el-descriptions-item label="盘点总数：">{{
                                commoditydetailsData.totalNum
                                }}</el-descriptions-item>
                            <el-descriptions-item label="盘盈数量：">{{
                                commoditydetailsData.addNum
                            }}</el-descriptions-item>
                            <el-descriptions-item label="盘亏数量：">{{
                                commoditydetailsData.subNum
                            }}</el-descriptions-item>
                        </el-descriptions>
                    </el-col>
                </el-row>

                <div class="hm-form-title">商品信息</div>
                <el-row class="hm-row3 mb96" :gutter="120">
                    <el-col :span="24">
                        <el-table v-loading="loading" :data="outBoundRecordDetailsList">
                            <el-table-column label="序号" type="index" width="55" align="center" />
                            <el-table-column label="库存编码" align="center" prop="" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.productInfo.stockCode }}
                                </template>
                            </el-table-column>
                            <el-table-column label="商品编码" align="center" prop="" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.productInfo.id }}
                                </template>
                            </el-table-column>
                            <el-table-column label="69码" align="center" prop="" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.productInfo.styleCode }}
                                </template>
                            </el-table-column>
                            <el-table-column label="商品名称" align="center" prop="styleName" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.productInfo.styleName }}
                                </template>
                            </el-table-column>
                            <el-table-column label="商品主图" align="center" prop="productImage" width="100">
                                <template #default="scope">
                                    <image-preview :src="scope.row.productInfo.productImage" :width="50" :height="50" />
                                </template>
                            </el-table-column>
                            <el-table-column label="商品类目" align="center" prop="categoryName" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.productInfo.productCategoryName }}
                                </template>
                            </el-table-column>
                            <el-table-column label="规格/材质" align="center" prop="specs" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.productInfo.specs }}
                                </template>
                            </el-table-column>
                            <!-- <el-table-column label="材质" align="center" prop="ingredient" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.productInfo.ingredient }}
                                </template>
                            </el-table-column> -->
                            <el-table-column label="货架号" align="center" prop="" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ scope.row.locationName }}
                                </template>
                            </el-table-column>
                            <el-table-column label="盘点数量" align="center" prop="" show-overflow-tooltip>
                                <template #default="scope">
                                    {{ Number(scope.row.stockAvailableResult) }}
                                </template>
                            </el-table-column>
                            <el-table-column label="盈亏状况" align="center" prop="" show-overflow-tooltip>
                                <template #default="scope">
                                    <span v-if="scope.row.countResult == 2" :style="{color: '#19D11B'}">盈{{ scope.row.countNum }}</span>
                                    <span v-if="scope.row.countResult == 3" :style="{color: '#FC2540'}">亏{{ scope.row.countNum }}</span>
                                    <span v-if="scope.row.countResult == 1">无盈亏</span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                            v-model:limit="queryParams.pageSize" @pagination="getList" />
                    </el-col>
                </el-row>
            </div>
        </el-drawer>
    </div>
</template>
<script setup name="OutBoundRecordDetails" lang="ts">
import { queryCountDetailList } from '@/api/group/productOutbound/index'

const props = defineProps({
    commoditydetailsData: {
        type: Object,
        default: ''
    },
    dialogInfoVisible: {
        type: Boolean,
        default: false
    },
});
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
})
const loading = ref(true);
const total = ref(0);
const outBoundRecordDetailsList = ref([])
const show = computed(() => props.dialogInfoVisible);
const emits = defineEmits(['doClose'])
const handleClose = () => {
    emits('doClose')
}
watch(() => props.dialogInfoVisible, (v) => {
    if (v) {
        getList()
    }
});
/** 查询列表 */
const getList = async () => {
    try {
        loading.value = true;
        const res = await queryCountDetailList({ ...queryParams.value, countId: props.commoditydetailsData.id });
        (outBoundRecordDetailsList.value as any) = res.rows;
        total.value = res.total;
        loading.value = false;
    } catch (e) {
    } finally {
        loading.value = false;
    }
};
onMounted(() => {
})
</script>
<style lang="scss" scoped>
.hm-box-title {
    font-weight: 600;
    font-size: 21px;
    color: #1A1B1C;
    padding-bottom: 24px;
    border-bottom: 1px solid #f3f3f7;
}

.hm-form-title {
    font-size: 16px;
    font-weight: 500;
    color: #1a1b1c;
    margin-bottom: 10px;
}


:deep(.el-drawer__header) {
    margin-bottom: 0px !important;
}

.mb96 {
    margin-bottom: 20px;
}
</style>